<template>
	<view class="news-list" ref="listCon">
    <view class="my-loading" v-if="loading">
      <u-loading mode="circle" size="36"></u-loading>
    </view>
		<view class="list-con" id="listcon" v-else>
        <view v-if="list.length > 0">
					<u-swipe-action
					  class="item"
						:show="item.show"
						:index="index" 
						v-for="(item, index) in list"
						:key="index"
						@click="handleAction"
						@open="openAction"
						@content-click="handleDetail"
						:options="item.options"
						>
						<view class="title ellipsis">{{ item.title }}</view>
						<u-badge v-if="item.status == 'UN_READY'" :is-dot="true" :offset="[0, 380]"></u-badge>
						<view class="content ellipsis-2">{{ item.content }}</view>
						<view class="time">{{ item.createTime }}</view>
					</u-swipe-action>
          <u-loadmore :status="status" />
        </view>
        <view v-else><u-empty text="暂无数据" mode="list"></u-empty></view>
		</view>
	</view>
</template>

<script>
import { API } from '@/config/myApi.js';
import { nextTick } from "vue";
	export default {
		data() {
			return {
				// 请求参数
        params: {
          pageNum: 1,
          pageSize: 20
        },
        loading: true,
        status: 'loadmore',
        list: [],
				options: []
			};
		},
    onLoad() {
      this.getListFn('pull'); //获取列表
    },
    // 下拉刷新
    onPullDownRefresh() {
      this.status = 'loadmore';
      this.params.pageNum = 1;
      this.getListFn('pull');
    },
    // 上拉加载
    onReachBottom() {
      if (this.status !== 'nomore') {
        this.status = 'loading';
        this.params.pageNum++;
        this.getListFn('push');
      }
    },
    methods: {
      // 获取列表
      async getListFn(v) {
        const res = await API.getNewsListApi(this.params);
        if (res.code === 200) {
					let temp = res.result.records;
					temp.forEach(i=>{
						i.options = [];
						if (i.status == 'UN_READY') {
							i.options.push({ text: '已读', style: { backgroundColor: '#007aff' } });
							i.options.push({ text: '删除', style: { backgroundColor: '#dd524d' } });
						} else {
							i.options.push({ text: '删除', style: { backgroundColor: '#dd524d' } });
						}
					});
					if (v == 'pull') {
						this.list = temp;
					} else {
						this.list = this.list.concat(temp);
					}
          if(this.params.pageNum >= (res.result.pages * 1)) {
            this.status = 'nomore'
          } else {
            this.status = 'loading';
          }
        }
        this.loading = false;
				uni.stopPullDownRefresh();
      },
			// 已读消息
			putReadNews(id) {
				API.getReadNewsApi(id).then(res=>{
					if (res.success) {
						this.params.pageNum = 1;
						this.getListFn('pull');
					}
				})
			},
			// 删除消息
			delNews(id) {
				API.delNewsApi(id).then(res=>{
					if (res.success) {
						this.$u.toast("删除成功");
						this.params.pageNum = 1;
						this.getListFn('pull');
					}
				})
			},
			// 点击滑动操作按钮
			handleAction(index, btn) {//数据下标   按钮下标
				let id = this.list[index].id;
				if (this.list[index].status == 'UN_READY' && btn == 0) {
					// 已读
					this.putReadNews(id);
				} else {
					// 删除
					this.delNews(id);
				}
			},
			// 查看详情
			handleDetail(index) {
				let id = this.list[index].id;
				this.putReadNews(id);
				uni.navigateTo({
					url:'/pages/mine/news/listDetail?item=' + encodeURIComponent(JSON.stringify(this.list[index]))
				})
			},
			// 关闭其他
			openAction(index){
				this.list.forEach((i, k) => {
					i.show = index == k;
				});
				this.$forceUpdate()
			},
    }
	}
</script>

<style lang="scss" scoped>
	@import '../ascss/newsList.scss';
</style>
